<template>
  <el-row class="container">
    <div class="p-content">
      <div class="flex">
        <div class="item">系统名称:</div>
        <div style="flex:1;">{{osName}}</div>
      </div>
      <div class="flex">
        <div class="item">系统构架:</div>
        <div style="flex:1;">{{osArch}}</div>
      </div>
      <div class="flex">
        <div class="item">系统版本:</div>
        <div style="flex:1;">{{osVersion}}</div>
      </div>
      <div class="flex">
        <div class="item">cpu核数:</div>
        <div style="flex:1;">{{processors}}核</div>
      </div>
      <div class="flex">
        <div class="item">服务器外网IP:</div>
        <div style="flex:1;">{{ip}}</div>
      </div>
      <div class="flex">
        <div class="item">服务器外网IP地址:</div>
        <div style="flex:1;">{{ipAddress}}</div>
      </div>
      <div class="flex">
        <div class="item">线程总数:</div>
        <div style="flex:1;">{{totalThread}}个</div>
      </div>
      <div class="flex">
        <div class="item">服务器时间:</div>
        <div style="flex:1;">{{datetime}}</div>
      </div>
      <div class="flex">
        <div class="item">磁盘:</div>
        <div style="flex:1;">
          <div v-for="disk in disks" :key="disk">{{disk}}</div>
        </div>
      </div>
      <div class="flex">
        <div class="item">pid:</div>
        <div style="flex:1;">{{pid}}</div>
      </div>
      <div class="flex m-t-30">
        <div class="item">JAVA_HOME:</div>
        <div style="flex:1;">{{javaHome}}</div>
      </div>
      <div class="flex">
        <div class="item">JAVA_VERSION:</div>
        <div style="flex:1;">{{javaVersion}}</div>
      </div>
      <div class="flex">
        <div class="item">USER_HOME:</div>
        <div style="flex:1;">{{userHome}}</div>
      </div>
      <div class="flex">
        <div class="item">USER_NAME:</div>
        <div style="flex:1;">{{userName}}</div>
      </div>
      <div class="flex m-t-30">
        <div class="item">总内存:</div>
        <div style="flex:1;">{{totalMemorySize}}</div>
      </div>
      <div class="flex">
        <div class="item">剩余内存:</div>
        <div style="flex:1;">{{freePhysicalMemorySize}}</div>
      </div>
      <div class="flex">
        <div class="item">初始总内存(JVM):</div>
        <div style="flex:1;">{{initTotalMemorySize}}</div>
      </div>
      <div class="flex">
        <div class="item">最大可用内存(JVM):</div>
        <div style="flex:1;">{{maxMemorySize}}</div>
      </div>
      <div class="flex">
        <div class="item">已使用内存(JVM):</div>
        <div style="flex:1;">{{usedMemorySize}}</div>
      </div>
    </div>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"

const $api = inject('$api')
const $post = inject('$post')
const osName = ref("")
const osArch = ref("")
const osVersion = ref("")
const totalMemorySize = ref("")
const totalThread = ref("")
const ip = ref("")
const datetime = ref("")
const ipAddress = ref("")
const processors = ref("")
const disks = ref([])
const pid = ref("")
const javaHome = ref("")
const javaVersion = ref("")
const userHome = ref("")
const userName = ref("")
const initTotalMemorySize = ref("")
const maxMemorySize = ref("")
const usedMemorySize = ref("")
const freePhysicalMemorySize = ref("")

onMounted(()=>{
  getData()
})

function getData(){
  $post($api.systemServerIndex).then((res:any)=>{
    osName.value = res.data.result.osName
    osArch.value = res.data.result.osArch
    osVersion.value = res.data.result.osVersion
    processors.value = res.data.result.processors
    totalMemorySize.value = res.data.result.totalMemorySize
    totalThread.value = res.data.result.totalThread
    ip.value = res.data.result.ip
    ipAddress.value = res.data.result.ipAddress
    datetime.value = res.data.result.datetime
    disks.value = res.data.result.disks
    pid.value = res.data.result.pid
    javaHome.value = res.data.result.JAVA_HOME
    javaVersion.value = res.data.result.JAVA_VERSION
    userHome.value = res.data.result.USER_HOME
    userName.value = res.data.result.USER_NAME
    initTotalMemorySize.value = res.data.result.initTotalMemorySize
    maxMemorySize.value = res.data.result.maxMemorySize
    usedMemorySize.value = res.data.result.usedMemorySize
    freePhysicalMemorySize.value = res.data.result.freePhysicalMemorySize
  })
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  padding: 50px 50px;
  background-color: white;
  font-size: 14px;

  .item{
    margin-right: 10px;
  }
}
</style>
